<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 1.5rem;
        }
        body{
            background-image: url(./backgrond.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        button{
            width: 5rem;
            height: 3rem;
            background-color: rgb(173, 170, 170);
            border-radius: 10%;
            box-shadow: 0.5rem solid black;
            color: aliceblue;
        }
        #myInput{
            height: 3rem;
            width: 10rem;
            border-radius: 1rem;
        }
        #myInput:focus{
            background-color: rgb(179, 174, 168);
        }
        .top{
            width: 20rem;
            margin: 0 auto;
            margin-top: 5rem;
        }
        .box{
            width: 60%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .box div{
            width: 45%;
            margin: 1rem;
            padding: 1rem;
            border-radius: 1rem;
        }
        .box .reporttime{
            width: 100%;
        }
    </style>
</head>

<body>
        <div class="top">
            <input type="text" id="myInput">
            <button>查询</button>
        </div>
        <div class="box">
            <div class="city">城市：</div>
            <div class="weather">天气：</div>
            <div class="temperature">温度：</div>
            <div class="humidity">湿度：</div>
            <div class="winddirection">风向：</div>
            <div class="windpower">风力：</div>
            <div class="reporttime">更新时间：</div>
        </div>


        <script>
            let btn = document.querySelector('button')
            // let input = document.querySelector('input')
            let input = document.getElementById("myInput")
            let city

            const name = document.querySelector('.box .city')
            const weather = document.querySelector('.box .weather')
            const temperature = document.querySelector('.box .temperature')
            const humidity = document.querySelector('.box .humidity')
            const winddirection = document.querySelector('.box .winddirection')
            const windpower = document.querySelector('.box .windpower')
            const reporttime = document.querySelector('.box .reporttime')

            function getWeather() {
                city = input.value
                if (city === '') {
                    alert("此处不能为空!");
                }
                fetch(`https://restapi.amap.com/v3/weather/weatherInfo?city=${city}&key=983ba1456361beb8ddd3cbe47c78ac49`)
                    .then(response => {
                        // console.log(response.json())
                        return response.json()
                    })
                    // .then(data => console.log(data.lives[0]))
                    .then(data => {
                        name.innerHTML = "城市：" + data.lives[0].city;
                        weather.innerHTML = "天气：" + data.lives[0].weather;
                        temperature.innerHTML = "温度：：" + data.lives[0].temperature + "℃";
                        humidity.innerHTML = "湿度：" + data.lives[0].humidity + "%";
                        winddirection.innerHTML = "风向：" + data.lives[0].winddirection;
                        windpower.innerHTML = "风力：" + data.lives[0].windpower + "级";
                        reporttime.innerHTML = "更新时间：" + data.lives[0].reporttime
                    })
            }

            btn.addEventListener('click', function (city) {
                city = input.value
                getWeather()
            })

            input.addEventListener('keyup', function (e) {
                if (e.key === 'Enter') {
                    getWeather()
                }
            })

        </script>
</body>

</html>